<template>
  <teleport to="body">
    <section
      v-if="modelValue"
      :class="[
        'base-dialog',
        modelValue ? 'active' : '',
      ]"
      @click="handleDialogClick"
    >
      <section
        :class="[
          'base-dialog-body',
          modelValue ? 'active' : '',
        ]"
        :style="{
          width: typeof width === 'number' ? `${width}px` : width,
          backgroundColor: dialogBodyBackgroundColor,
        }"
        @click="handleBodyClick"
      >

        <section v-if="titleVisible" class="base-dialog__title">
          <slot v-if="slots.title" name="title" ></slot>
          <h1 v-else class="title">{{title}}</h1>
          <span class="close" @click="handleClose"><svg-icon icon-class="icon-close" class-name="icon-close"></svg-icon></span>
        </section>
        <section class="base-dialog__content">
          <slot></slot>
        </section>
        <section v-if="footerVisible && slots.footer" class="base-dialog__footer">
          <slot name="footer"></slot>
        </section>
      </section>
    </section>
  </teleport>
</template>

<script setup lang="ts">
import { useSlots, watch, onMounted, onUnmounted } from 'vue';

const slots = useSlots();
const emits = defineEmits(['update:modelValue', 'close']);

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  closeOnClickModal: {
    type: Boolean,
    default: true,
  },
  width: {
    type: [String, Number],
    default: '50%',
  },
  titleVisible: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: '',
  },
  footerVisible: {
    type: Boolean,
    default: true,
  },
  dialogBodyBackgroundColor: {
    type: String,
    default: '#ffffff',
  },
});

const handleClose = () => {
  emits('update:modelValue', false);
  emits('close');
}

const handleDialogClick = () => {
  if(!props.closeOnClickModal) {
    return;
  }
  handleClose();
}

const handleBodyClick = (event:Event) => {
  event.stopPropagation();
}

const toggleBodyScroll = (shouldLock: boolean) => {
  if (shouldLock) {
    document.body.classList.add('no-scroll');
  } else {
    document.body.classList.remove('no-scroll');
  }
};

watch(
  () => props.modelValue,
  (newValue) => {
    toggleBodyScroll(newValue);
  },
  { immediate: true }
);

onMounted(() => {
  toggleBodyScroll(props.modelValue);
});

onUnmounted(() => {
  toggleBodyScroll(false);
});
</script>

<style lang="scss" scoped>
.base-dialog {
  position: fixed;
  display: flex;
  visibility: hidden;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(20, 20, 20, 0.5);
  z-index: 99999;
  align-items: center;
  top: 0;
  left: 0;
  justify-content: center;
  flex-direction: column;

  &.active {
    visibility: visible;
  }

  .base-dialog-body {
    z-index: 9999;
    width: 50%;
    min-height: 200px;
    border-radius: 15px;
    overflow: hidden;
    color: var(--main-black-text-color);

    .base-dialog__title {
      height: 44px;
      border-bottom: 1px solid var(--main-border-color);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px;
      box-sizing: border-box;
      .title {
        font-size: 16px;
        font-weight: 500;
      }
      .close {
        cursor: pointer;
        padding: 6px;
      }
    }

    .base-dialog__content {
      box-sizing: border-box;
      max-height: 80vh;
      overflow: auto;
    }

    .base-dialog-footer {
      display: flex;
      justify-content: flex-end;
      padding: 0 12px;
      box-sizing: border-box;
    }
  }
}
</style>
